<template>
    <div :style="!isMO?'margin-left: 20%; margin-right: 20%; margin-top: 8%; margin-bottom: 10%':'margin-top: 8%; margin-bottom: 10%'">
        <Card dis-hover>
            <Form ref="form" :model="form" :rules="rules" label-position="top">
                <FormItem label="注册类型" prop="type">
                    <RadioGroup v-model="form.type">
                        <Radio label="1" border>
                            <span>访客</span>
                        </Radio>
                        &nbsp;
                        <Radio label="0" border>
                            <span>学生</span>
                        </Radio>
                    </RadioGroup>
                </FormItem>
                <Row :gutter="20" v-if="form.type!=1">
                    <Col span="12">
                        <FormItem label="班别" prop="clazz">
                            <InputNumber :min="1" :max="38" v-model="form.clazz"></InputNumber>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="届数" prop="sess">
                            <InputNumber :min="2000" :max="2021" v-model="form.sess"></InputNumber>
                        </FormItem>
                    </Col>
                </Row>
                <FormItem label="用户名" prop="name" style="margin-right: 10%">
                    <Input placeholder="不可更改" disabled></Input>
                </FormItem>
                <!--                <br/>-->
                <FormItem label="邮箱" prop="email" style="margin-right: 10%">
                    <Input v-model="form.email" placeholder="非必填字段，建议填写，如QQ邮箱为：你的qq号@qq.com"></Input>
                </FormItem>
                <!--                <br/>-->
                <FormItem label="密码" prop="password" style="margin-right: 10%">
                    <Input v-model="form.password" type="password" placeholder="password"></Input>
                </FormItem>
                <!--                <br/>-->
                <FormItem>
                    <Button type="primary" @click="submit('form')" style="width: 25%"> 提 交</Button>
                </FormItem>
            </Form>
        </Card>
    </div>
</template>

<script>
    export default {
        name: "changeU",
        data() {
            return {
                isMO: navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i),
                form: '',
                rules: {
                    name: [
                        {required: true, message: '用户名不能为空', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '密码不能为空', trigger: 'blur'},
                        {type: 'string', min: 4, message: '密码不能少于四位', trigger: 'blur'}
                    ],
                    email: [
                        {type: 'email', message: '格式错误', trigger: 'blur'}
                    ],
                    type: [
                        {required: true, message: '请选择', trigger: 'blur'},
                    ],
                }
            }
        },
        created() {
            const t = this;
            axios.get('/getUser').then(function (resp) {
                t.form = resp.data;
            })
        },
        methods: {
            submit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if (this.form.type == 0 && (this.form.clazz == '' || this.form.sess == '')) {
                            this.$Message.error('请检查班级或届数')
                            return false;
                        }
                        const that = this;
                        axios.post('/updateUser', that.form).then(function (resp) {
                            alert('修改成功，请重新登录；权限已被重置，如果是管理员请联系开发者重新授权。');
                            axios.get('/logout').then(function () {
                                location.href = '/';
                            })
                        });
                    } else {
                        this.$Message.error('请检查信息是否填写完整');
                    }
                })
            },
        }
    }
</script>

<style scoped>

</style>